<template>
	<div>
		<el-dialog v-model="dialogTableVisible" title="" width="30%">
			<div class="topTit">Add to list</div>
			<div class="inpBox">
				<input type="text" @input="input" v-model="input1" placeholder="Search" class="inp" name="" id="" /> <img @click.stop="sousuo" src="/src/assets/user/16.png" class="scehImg hand" alt="" />
			</div>
			<div class="boxList">
				<div v-for="(item, index) in list" @click="qieHaun(item, index)" :class="{ boxItems: ind == index }" :key="index" class="boxItem hand f f-a-c f-j-b">
					<div class="lef">{{ item.name }}</div>
					<div class="rig">{{ item.count }}</div>
				</div>
			</div>
			<div class="botBtn f f-a-c f-j-b">
				<div @click="addList" class="lefBtn hand">Create a new list</div>
				<div @click="save" class="rigBtn hand">Save</div>
			</div>
		</el-dialog>
		<el-dialog v-model="AdddialogTableVisible" title="" width="30%">
			<div class="topTit hand">Add to list</div>
			<div class="inpBoxs"><input type="text" placeholder="Search" v-model="addInp" class="inps" name="" id="" /></div>
			<div class="botBtn f f-a-c f-j-b">
				<div @click="back" class="lefBtn hand">Back</div>
				<div @click="submit" class="rigBtn hand">Add</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { CreateClassification, FavoriteGigs, FavoriteUser } from "@/api/xpert.js";
	import { ClubsGroup, CreateClubs, CollectionClub } from "@/api/knowClub/index.js";
	import { Search } from "@element-plus/icons-vue";
	import { ElMessage } from "element-plus";
	let dialogTableVisible = ref(false);
	let AdddialogTableVisible = ref(false);
	let ind = ref(-1);
	let input1 = ref("");
	let addInp = ref("");
	let list = ref([]);
	let num = ref([]);
	let groupId = ref("");
	let userId = ref("");
	let clubId = ref("");
	let type = ref(3); //3是俱乐部、2是文章
	const emit = defineEmits(["initObj", "initGigs"]);
	const back = () => {
		dialogTableVisible.value = true;
		AdddialogTableVisible.value = false;
	};
	const addList = () => {
		dialogTableVisible.value = false;
		AdddialogTableVisible.value = true;
	};
	const qieHaun = (item, index) => {
		ind.value = index;
		groupId.value = item.id;
	};
	// 点击添加
	const save = async () => {
		if (type.value == 3) {
			// 表示俱乐部
			let n = await CollectionClub({
				groupId: groupId.value,
				clubId: clubId.value
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				initList();
				emit("initGigs");
			}
		} else {
			// 表示文章
			let n = await FavoriteUser({
				groupId: groupId.value,
				userId: userId.value
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				initList();
				emit("initObj");
			}
		}
		dialogTableVisible.value = false;
		AdddialogTableVisible.value = false;
	};
	// 删除搜索框的内容
	const input = e => {
		if (e.target.value == "") {
			initList();
		}
	};
	// 点击搜索
	const sousuo = async () => {
		let n = await FavoritePage({
			type: num.value,
			name: input1.value
		});
		if (n.code == 200) {
			list.value = n.data.list;
		}
	};
	// 初始化数组
	const initList = async () => {
		let n = await ClubsGroup({
			type: type.value
		});
		if (n.code == 200) {
			list.value = n.data.list;
		}
	};
	// 添加
	const submit = async () => {
		let n = await CreateClubs({
			type: type.value,
			name: addInp.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			initList();
			setTimeout(() => {
				dialogTableVisible.value = true;
				AdddialogTableVisible.value = false;
			}, 1000);
		}
	};
	// 暴露给父组件
	defineExpose({
		dialogTableVisible,
		num,
		list,
		initList,
		clubId,
		userId,
		type
	});
</script>
<style scoped lang="scss">
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}

	::v-deep .el-dialog {
		border-radius: px(17) !important;
		padding: 50px 50px 20px 50px;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: px(30);
	}
	.botBtn {
		margin-top: px(20);
		.lefBtn {
			width: px(218);
			height: px(53.3);
			line-height: px(53.3);
			background: #eeeeee;
			border-radius: px(5.3);
			font-size: px(18);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #02102e;
		}
		.rigBtn {
			width: px(108);
			height: px(53.3);
			line-height: px(53.3);
			background: #02102e;
			border-radius: px(5.3);
			font-size: px(18);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}
	.boxList {
		width: 100%;
		max-height: px(400);
		margin-top: px(10);
		overflow: auto;
		.boxItem {
			height: px(60);
			padding: 0 px(15);
			border-radius: px(10);
		}
		.boxItems {
			background-color: #f7f7f9;
		}
		.lef {
			font-size: px(21);
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #02102e;
		}
		.rig {
			font-size: px(21);
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #8590a1;
		}
	}
	.boxList::-webkit-scrollbar {
		width: px(7); /* 滚动条宽度 */
	}
	.boxList::-webkit-scrollbar-track {
		background: #f7f7f9; /* 滚动条轨道背景色 */
	}
	.boxList::-webkit-scrollbar-thumb {
		background: #c1c5cb; /* 滚动条滑块颜色 */
		border-radius: px(10);
	}
	.boxList::-webkit-scrollbar-thumb:hover {
		background: #c1c5cb; /* 鼠标悬停时滚动条滑块颜色 */
	}
	.inpBoxs {
		position: relative;
		width: 100%;
		height: px(60);
		border: px(2.5) solid #000;
		margin-top: px(20);
		border-radius: px(10);
		overflow: hidden;
		.scehImg {
			position: absolute;
			width: px(24);
			height: px(24);
			right: px(15);
			top: 50%;
			transform: translateY(-50%);
		}
		.inps {
			padding: 0;
			border: 0;
			height: 100%;
			width: 100%;
			padding: 0 px(50) 0 px(20);
			font-size: px(18);
		}
	}
	.inpBox {
		position: relative;
		width: 100%;
		height: px(50);
		border: px(2.5) solid #000;
		margin-top: px(20);
		border-radius: px(10);
		overflow: hidden;
		.scehImg {
			position: absolute;
			width: px(24);
			height: px(24);
			right: px(15);
			top: 50%;
			transform: translateY(-50%);
		}
		.inp {
			padding: 0;
			border: 0;
			height: 100%;
			width: 100%;
			padding: 0 px(50) 0 px(20);
			font-size: px(18);
		}
	}
	input:focus {
		outline: none;
	}
	.topTit {
		font-size: px(26.6);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
	}
</style>
